import { Form, Card, InputNumber } from 'antd';
import { useNode } from '@craftjs/core';
import { Select } from 'antd';
import { withBatchUpdateProp } from '../util';

export const Settings = () => {
  const {
    actions: { setProp },
    props,
  } = useNode((node) => ({
    props: node.data.props,
  }));

  return (
    <div>
      <Form
        initialValues={{ ...props }}
        onValuesChange={(values) => {
          // { labelCol: { span: 10 }}
          const batchUpdateProp = withBatchUpdateProp(setProp);
          batchUpdateProp(values);
        }}
      >
        <Card>
          <Form.Item name="layout" label="布局设置">
            <Select
              options={[
                { label: 'inline', value: 'inline' },
                { label: 'vertical', value: 'vertical' },
                { label: 'horizontal', value: 'horizontal' },
              ]}
            />
          </Form.Item>
          <Form.Item name={['labelCol', 'span']} label="标签宽度">
            <InputNumber />
          </Form.Item>
        </Card>
      </Form>
    </div>
  );
};
